iT邦幫忙

0

CMoney軟體工程師戰鬥營_Week 13

  • 分享至 

  • xImage
  •  

由於疫情的關係
大家已在家學習一個月
原本想說最要克服的是自制力
但沒想到事情多到
我也沒時間發閒~~~

本週分領域學習:
Web-JavaScript

js筆記

引入:行內引入,內部引入,外部引入,動態引入

  • JS引入

    • 行內引入→body: onload="alert('String要引號')">

    • 內部引入→window.alert('內部引入')

    • 外部引入→

    • 動態引入

      • 動態引入1→document.write('</script>');

      • 動態引入2

        <script>
            const elemHead = document.getElementsByTagName('head')[0];
            const elemScript = document.createElement('script');
            elemScript.src = './js/dynamic.js';
            elemHead.appendChild(elemScript);
          </script>
        
  • DOM(document Object Model)

    • 選取

      • document.getElemenByID('idname')
      • querySelector('#idname')→缺點是如果今天抓的是有多個的class,只會抓取第一個
      • querySelectorAll(.classname)
    • 操作

      • 改變文字:textContent→document.querySelector('#id').textContent='Fanny';

      • 加入HTML:innerHTML→document.querySelector('#id').innerHTML='test';→資安疑慮,如果有放入表單輸入資料,容易被攻擊

      • 更改影像:src→document.querySelector('#pic').src='./img/'

      • 加入CSS:style→document.querySelector('#id').style.borderLeft='solid 2px red';

        :document.querySelector('#pic').setAttribute('src','./img....');
        

        :document.querySelector('#pic').setAttribute('style','border: solid..');

      • 套用格式:className→document.querySelector('#').className+=' .敲一個空格';

      • 較直觀的套用格式:classList→document.querySelector('#').classList.add(' classname', 'gg'); 注意:名字就好

  • event

    • click

      • document.querySelector('#id').addEventListener('click',function(){alert(''Hi)});
      • 箭頭函式:document.querySelector('#id').addEvenListener('click',()⇒{});
    • mouse

      • document.querySelector('#id').addEventListener('mouseenter',function(){document.querySelector('#id').src='./img...'}); 紅色部分可改this
      • document.querySelector('#id').addEventListener('mouseleave',function(){document.querySelector('#id').src='./img...'});
      • 用this不能用箭頭函式,this會是window,而window他沒有src屬性
    • keyup

      • document.querySelector('#id').addEventListener('keyup',function(e){if(e.keycode===13){alert(this.value)}} ); this是整個表單
      • alert出來是字串!
    • 額外補充:→抓表單值抓value

    • change

      • document.querySelector('#id').addEventListener('change',function(){alert('this.value')});
    • 事件流Propagation:boxin,boxout

      • js預設冒泡→從點選對象往上層

      • 捕獲→

        document.querySelector('#boxin').addEventListener('click',function()
        {console.log(this.id);
        e.stopPropagation;
        });
        
  • number

    • 累加→設定button被監聽到click時做++
    • 亂數→const RandNum=Math.random();
      • 10倍亂→document.querySelector('#id').textContent=RandNum*10;
      • 10倍四捨五入→document.querySelector('#id').textContent=Math.round(RandNum*10);
      • 無條件捨去→document.querySelector('#id').textContent=Math.floor(RandNum*10);
      • 無條件進位→document.querySelector('#id').textContent=Math.ceil(RandNum*10);
  • String

    • const str='list';

      const str=''+'list'+<'/ul'>;

      const str='<li>list</ul>';

      const str=<ul><li>list</li></ul>

      document.querySelector('#list').innerHTML=str;

    • const age=20;

      const str=我今天${age}歲;→IE11以下不支援

  • 變數型態:boolean, undefined, null

    • boolean→const isMobile=window.innerWidth≤480;

      console.log(isMobile);

    • undefined→宣告卻未賦

    • null→指向空

  • array&object

    • let arr=new Array();

      arr=[1,2,3,4,'book'];

    • const arr=new Array(5, 6, 7, 'hi');

    • let arr=[];

      arr=[2, 4, 5, 'go'];

    • const arr=[1, 3, 5, 'now'];

    • 物件陣列

      • const obj=new Object();

        obj.name='Fanny';

      • const obj={};

        obj.age=30;

      • const obj={

        name:'Fanny',

        age=30

        };

      • 取物件長度:

        object.keys(obj).length

  • function-for/if-else

    可以獨立取出來

  • interval&timeout

    • 定時器interval

      let count=0;
      setInterval(function(){...},1000);//毫秒
      
    • 暫停器timeout

      let count=0;
      setTimeout(function(){...},2000);//2秒後暫停
      

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言